//ECharts
//集群资源使用情况////
var d_chart1 = document.getElementById('chart1');
var p_chart1 = document.getElementById('p_chart1');
var resizeWorldMapContainer1 = function () {
    d_chart1.style.width = p_chart1.clientWidth +'px';
    d_chart1.style.height = p_chart1.clientHeight +'px';
};
resizeWorldMapContainer1();
$("#checkAll").change(function() {
    if($("#checkAll").is(':checked')){
        $("input[name='box']").prop("checked","true");
        changeChart();
    } else {
        $("input[name='box']").removeAttr("checked");
        changeChart();
    }
});
var chart1 = echarts.init(d_chart1, 'macarons');

chart1.setOption({
    title :{
        text: '集群资源使用分析',
        subtext: '时间：'+yesterday.toLocaleDateString()+'至'+myDate.toLocaleDateString()
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow'
        }
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true},
            right: '20%'
        }
    },
    legend: {
        data:['CPU使用率','内存大小','交换区大小']
    },
    color: ['#a9c4a9', '#e2ba95', '#9aa9c4'],
    grid: {
        top: '15%',
        left: '3%',
        right: '7%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : []
        }
    ],
    yAxis : [
        {
            type : 'value',
            name: 'CPU使用率',
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: '#a9c4a9'
                }
            },
            axisLabel: {
                formatter: '{value} %'
            }
        },
        {
            type: 'value',
            name: '内存大小',
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: '#e2ba95'
                }
            },
            axisLabel: {
                formatter: '{value} M'
            }
        }
    ],
    series : [
        {
            name:'CPU使用率',
            type:'bar',
            data:[]
        },
        {
            name:'内存大小',
            type:'bar',
            yAxisIndex: 1,
            data:[]
        },
        {
            name:'交换区大小',
            type:'bar',
            yAxisIndex: 1,
            data:[]
        }
    ]
});

var changeChart = function(){
    var arr = new Array();
    $('input[name="box"]:checked').each(function(i){
        arr[i] = $(this).val();
    });
    var category = [];
    var dj = [];
    var kx = [];
    var yx = [];
    for(var i=0; i<arr.length; i++){
        var temp = $("#monitoringStatisticsTbody").children("tr").eq(arr[i]);
        category.push(temp.children("td").eq(1).html());
        dj.push(temp.children("td").eq(2).html());
        kx.push(temp.children("td").eq(3).html());
        yx.push(temp.children("td").eq(4).html());
    }
    chart1.setOption({
        xAxis: {
            data: category
        },
        series : [
            {
                name:'CPU使用率',
                data:dj
            },
            {
                name:'内存大小',
                data:kx
            },
            {
                name:'交换区大小',
                data:yx
            }
        ]
    });
}

var d_chart2 = document.getElementById('chart2');
var p_chart2 = document.getElementById('p_chart2');
var resizeWorldMapContainer2 = function () {
    d_chart2.style.width = p_chart2.clientWidth +'px';
    d_chart2.style.height = p_chart2.clientHeight +'px';
};
resizeWorldMapContainer1();
var chart2 = echarts.init(d_chart2, 'macarons');

chart2.setOption({
    title :{
        text: '节点使用时段分析',
        subtext: '时间：'+'2018/9/12 00:00'+'至'+'2018/9/13 23:45'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    legend: {
        data:['CPU使用率','内存大小','交换区大小']
    },
    color: ['#a9c4a9', '#e2ba95', '#9aa9c4'],
    grid: {
        top: '15%',
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        name: '时间',
        type: 'category',
        data: [],
        boundaryGap : false
    },
    yAxis: [
        {
            name: 'CPU使用率',
            type: 'value',
            scale: true,
            splitArea: {
                show: true
            },
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: '#a9c4a9'
                }
            },
            axisLabel: {
                formatter: '{value} %'
            }
        },
        {
            type: 'value',
            name: '内存大小',
            scale: true,
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: '#e2ba95'
                }
            },
            axisLabel: {
                formatter: '{value} M'
            }
        }
    ],
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            y: '90%',
            start: 0,
            end: 100
        }
    ],
    series : [
        {
            name:'CPU使用率',
            type:'line',
            smooth: true,
            data:[]
        },
        {
            name:'内存大小',
            type:'line',
            smooth: true,
            data:[]
        },
        {
            name:'交换区大小',
            type:'line',
            smooth: true,
            data:[]
        }
    ]
});

$("#monitoringStatisticsSearch").click(function() {
    $("#monitoringStatisticsIsSearch").val(1);
    $("#monitoringStatisticsStartDateTemp").val($("#monitoringStatistics-startDate").html());
    $("#monitoringStatisticsEndDateTemp").val($("#monitoringStatistics-endDate").html());
    $("#monitoringStatisticsSearchContentTemp").val($("#monitoringStatisticsSearchContent").val());
    $.ajax({
        type: "POST",
        url: constUrl+"ClusterResourceUsage",
        dataType: "json",
        data: {
            operateType: "searchHostByHostName",
            hostName: $("#monitoringStatisticsSearchContent").val(),
            onePageCount: "10",
            currentPage: "1"
        },
        success: function (data) {
            addPageNum(data.result.pageNum, 3);
            addBox(data.result.hosts, "monitoringStatisticsTableList");
            paginationInit(3);
            changeChart();
        }
    });
});

$("#monitoringStatisticsTableList").on("click", "input[name='box'][type='checkbox']", function (e) {
    changeChart();
    e.stopPropagation();
});

$("#monitoringStatisticsTableList").on("click", ".trFtd", function (e) {
    if($(this).children('input').is(':checked')){
        $(this).children('input').removeAttr("checked");
    } else {
        $(this).children('input').prop("checked","true");
    }
    changeChart();
    e.stopPropagation();
});

$("#monitoringStatisticsTableList").on("click", ".computerTr", function () {
    var trTemp = $(this).children("td").eq(1).html();
    $.ajax({
        url: constUrl + "ClusterResourceUsage",
        type: 'post',
        dataType: 'json',
        data: {
            "operateType": "getHostHistoryState",
            "hostName": trTemp
        },
        success: function (responseText) {
            $('.computerTr').removeClass('trFocus');
            $(this).addClass('trFocus');
            chart2.setOption({
            	title :{           
                text: '节点使用时段分析',
                subtext: '时间：'+responseText.result.createTime[0] +'至'+responseText.result.createTime[responseText.result.createTime.length-1]
            		},
                xAxis: {
                    data: responseText.result.createTime
                	},
                series : [
                    {
                        name:'CPU使用率',
                        data: responseText.result.ut
                    },
                    {
                        name:'内存大小',
                        yAxisIndex: 1,
                        data: responseText.result.mem
                    },
                    {
                        name:'交换区大小',
                        yAxisIndex: 1,
                        data: responseText.result.swp
                    }
                ]
            });
        },
        error: function () {
            layer.alert("获取数据失败！")
        }
    });
});

$('#monitoringStatistics-endDate').text(myDate.getFullYear()+"-"+parseInt(myDate.getMonth()+1)+"-"+myDate.getDate());
$('#monitoringStatistics-start').datepicker().
on('changeDate.datepicker.amui', function(event) {
    console.log(endDate.valueOf());
    console.log(event.date.valueOf());
    if (event.date.valueOf() > endDate.valueOf()) {
        layer.alert('开始日期应小于结束日期！');
    } else {
        startDate = new Date(event.date);
        $('#monitoringStatistics-startDate').text($('#monitoringStatistics-start').data('date'));
    }
    $(this).datepicker('close');
});
$('#monitoringStatistics-end').datepicker().
on('changeDate.datepicker.amui', function(event) {
    if (event.date.valueOf() < startDate.valueOf()) {
        layer.alert('结束日期应大于开始日期！');
    } else {
        endDate = new Date(event.date);
        $('#monitoringStatistics-endDate').text($('#monitoringStatistics-end').data('date'));
    }
    $(this).datepicker('close');
});

$('#monitoringStatistics').on('opened.collapse.amui', function() {
    resizeWorldMapContainer1();
    chart1.resize();
    resizeWorldMapContainer2();
    chart2.resize();
}).on('closed.collapse.amui', function() {
    resizeWorldMapContainer1();
    chart1.resize();
    resizeWorldMapContainer2();
    chart2.resize();
});

window.onresize = function () {
    resizeWorldMapContainer1();
    chart1.resize();
    resizeWorldMapContainer2();
    chart2.resize();
    resizeWorldMapContainer3();
    chart3.resize();
    resizeWorldMapContainer4();
    chart4.resize();
    resizeWorldMapContainer5();
    chart5.resize();
//    resizeWorldMapContainer6();
//    chart6.resize();
//    resizeWorldMapContainer7();
//    chart7.resize();
    resizeWorldMapContainer8();
    chart8.resize();
    resizeWorldMapContainer9();
    chart9.resize();
};
